<script setup lang="ts">
import {reactive, ref, watch, computed, defineProps} from "vue";
import {GridMaterialType, InputMaterialType} from "@/data-type/material.type";
import BaseContainerMaterial from "@/material/container/BaseContainerMaterial.vue";
import {CommonUtils} from "great-jsutils";
const defaultProps = {
  type: 'grid',
  props: {
    row: {editColumnIndex: 0}
  },
  children: [
    {
      span: 12,
      children: [
        {
          id: CommonUtils.uuid(),
          children: [
          ]
        }
      ]
    }
  ]
}
const props = defineProps<{material:GridMaterialType}>();
let formState = reactive<InputMaterialType>(props.material);
formState.props = Object.assign(defaultProps.props, formState.props?formState.props:{});
formState.children = formState.children?formState.children:defaultProps.children;
watch(props, (newValue, oldValue)=>{
  formState = newValue.material;
});
const row = computed(() => {
  return props.material?.props?.row || defaultProps?.props?.row;
});
const cols = computed(() => {
  formState?.children.forEach(col => {
    col.id = col.id || CommonUtils.uuid();
    col.parentId = formState.id;
    if(!col.children || col.children.length === 0){
      col.children = [{
        id: CommonUtils.uuid(),
        type: 'baseContainer',
        parentId: col.id
      }];
    }
  });
  return props.material?.children || defaultProps?.children;
});
let onClick=(index:number)=>{
  const row = props.material?.props?.row || defaultProps?.props?.row;
  row.editColumnIndex = index;
}
</script>

<template>
  <div class="zhtt-material-grid">
    <a-row>
      <a-col v-for="(col, index) in cols" :span="col.span" @click="onClick(index)" :key="index+'GridMaterial'">
        <div v-if="col.children">
          <BaseContainerMaterial :material="col.children[0]"></BaseContainerMaterial>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.zhtt-material-grid .ant-row{
  min-height:35px;
  vertical-align: middle;
}
.zhtt-material-grid .ant-col:nth-child(2n + 1){
  /*background: rgba(0, 146, 255, .75);*/
  padding: 8px;
}
.zhtt-material-grid .ant-col:nth-child(2n){
  /*background: rgba(0, 146, 255, .45);*/
  padding: 8px;
}
</style>
